<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
			<el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable />
      </el-form-item>
      <el-form-item label="滑坡年代" prop="landslideTime">
        <el-input v-model="queryParams.landslideTime" placeholder="请输入滑坡年代" clearable />
      </el-form-item>
      <el-form-item label="滑坡性质" prop="landslideShape">
				<el-select v-model="queryParams.landslideShape" placeholder="请选择" clearable>
					<el-option v-for="item in [{ value: 1, label: '岩质滑坡' }, { value: 2, label: '土质滑坡' }]" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="省" prop="province">
				<el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable>
					<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="市" prop="city">
				<el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" clearable>
					<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="区/县" prop="county">
				<el-select v-model="queryParams.county" placeholder="请选择区/县" clearable>
					<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="乡" prop="town">
        <el-input v-model="queryParams.town" placeholder="请输入乡" clearable />
      </el-form-item>
      <el-form-item label="村" prop="village">
        <el-input v-model="queryParams.village" placeholder="请输入村" clearable />
      </el-form-item>
      <el-form-item label="滑坡类型" prop="landslideType">
				<el-select v-model="queryParams.landslideType" placeholder="请选择" clearable>
					<el-option v-for="item in [{ value: 1, label: '牵引式滑坡' }, { value: 2, label: '推移式滑坡' }, { value: 3, label: '混合式滑坡' }]" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item style="margin-left: 40px;">
				<el-button type="primary" @click="handleQuery">查询</el-button>
				<el-button @click="resetQuery">重置</el-button>
				<el-button type="primary" icon="Edit"  @click="handleExport">导出</el-button>
			</el-form-item>
		</el-form>
		<!--<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="Plus" @click="handleAdd">添加</el-button>
			</el-col>

		</el-row>-->

		<el-table v-loading="loading" ref="tableRef" :data="dataList" stripe @selection-change="handleSelectionChange" row-key="id">

			<!--<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />-->
			<el-table-column label="名称" align="center" prop="name" />
			<el-table-column label="野外编号" align="center" prop="outdoorNum" />
			<el-table-column label="滑坡年代" align="center" prop="landslideTime" />
			<el-table-column label="滑坡时间（年）" align="center" prop="landslideYear" />
			<el-table-column label="滑坡时间（月）" align="center" prop="landslideMonth" />
			<el-table-column label="滑坡时间（日）" align="center" prop="landslideDay" />
			<el-table-column label="滑坡类型" align="center" prop="landslideType">
				<template #default="scope">
          <span v-if="scope.row.landslideType==1">牵引式滑坡</span>
          <span v-if="scope.row.landslideType==2">推移式滑坡</span>
          <span v-if="scope.row.landslideType==3">混合式滑坡</span>
        </template>
      </el-table-column>
			
			<el-table-column label="滑坡性质" align="center" prop="landslideShape">
				<template #default="scope">
          <span v-if="scope.row.landslideShape==1">岩质滑坡</span>
          <span v-if="scope.row.landslideShape==2">土质滑坡</span>
        </template>
      </el-table-column>
			<el-table-column label="冠" align="center" prop="crown" />
			<el-table-column label="趾" align="center" prop="toe" />
			<el-table-column label="经度" align="center" prop="longitude" />
			<el-table-column label="纬度" align="center" prop="latitude" />
			<el-table-column label="省" align="center" prop="province" />
			<el-table-column label="市" align="center" prop="city" />
			
			<el-table-column label="区/县" align="center" prop="country" />
			<el-table-column label="乡" align="center" prop="town" />
			<el-table-column label="村" align="center" prop="village" />
			<el-table-column label="地层时代" align="center" prop="underAge" />
			<el-table-column label="地层岩性" align="center" prop="formationLithology" />
			<el-table-column label="构造部位" align="center" prop="structuralPosition" />
			<el-table-column label="地震烈度" align="center" prop="earthquakeIntensity" />
			
			<el-table-column label="地层倾向" align="center" prop="stratigraphicDip" />
			<el-table-column label="地层倾角" align="center" prop="stratigraphicAngle" />
			<el-table-column label="微地貌" align="center" prop="microrelief" />
			<el-table-column label="相对河流位置" align="center" prop="relativeRiverPosition" />
			<el-table-column label="斜坡结构类型" align="center" prop="slopeStructureType" />
			<el-table-column label="控滑结构面类型" align="center" prop="controlStructureType" />
			<el-table-column label="控滑结构面倾向" align="center" prop="controlStructureInclination" />
			
			<el-table-column label="控滑结构面倾角" align="center" prop="controlStructureAngle" />
			<el-table-column label="滑坡长度" align="center" prop="landslideLength" />
			<el-table-column label="滑坡宽度" align="center" prop="landslideWidth" />
			<el-table-column label="滑坡厚度" align="center" prop="landslideThickness" />
			<el-table-column label="滑坡坡度" align="center" prop="landslideAspect" />
			<el-table-column label="滑坡坡向" align="center" prop="landslideSlope" />
			<el-table-column label="滑坡面积" align="center" prop="landslideArea" />
			
			<el-table-column label="滑坡体积" align="center" prop="landslideVolume" />
			<el-table-column label="滑坡平面形态" align="center" prop="landslidePlaneShape" />
			<el-table-column label="滑坡剖面形态" align="center" prop="landslideProfileShape" />
			<el-table-column label="规模等级" align="center" prop="scaleGrade" />
			<el-table-column label="上传人" align="center" prop="uploadUserName" />
			<el-table-column label="上传时间" align="center" prop="uploadTime" />
			<!--<el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button type="text" @click="handleView(scope.row)">查看</el-button>
				</template>
			</el-table-column>-->
		</el-table>

		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" />

		<!-- 查看 -->
		<el-dialog v-model="open" width="1000px" title="查看钻孔数据" append-to-body :show-close="false" :close-on-click-modal="false">
			<p></p>
			

			<template #footer>
				<div class="dialog-footer">
					<!--<el-button type="primary" v-if="form.banben == '保存新版本'" @click="submitForm">保存</el-button>
          <el-button type="primary" v-else @click="overSave">保存</el-button>-->
					<!-- <el-button type="primary" @click="clearForm">清空</el-button> -->
					<el-button @click="closeForm">取消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="dataView">
	import { getUserId } from '@/utils/auth'
	import { getProvince, getChildArea } from "@/api/system/division";
	import { ElMessageBox } from 'element-plus'
	import { listDataView, getDetail, getDataTyes, isExistData , getDataDoc, getVersionCode } from '@/api/datamanage/landslipSurvey'
	const {
		proxy
	} = getCurrentInstance();
	
	const router = useRouter();
	const route = useRoute();
	const dataList = ref([]);
	const ids = ref([]);
	const loading = ref(false);
	const single = ref(true);
	const multiple = ref(true);
	const total = ref(0);
	const provinceData = ref([]); //省
	const cityData = ref([]); //市
	const areaData = ref([]); //区、县
	const provinceFormData = ref([]); //省
	const cityFormData = ref([]); //市
	const areaFormData = ref([]); //区、县
	const provinceFormData1 = ref([]); //省
	const cityFormData1 = ref([]); //市
	const areaFormData1 = ref([]); //区、县
	const open = ref(false);
	const openData = ref(false);
	const docList = ref([]);
	const dataType = ref('');
	const selectData = ref([]);

	const provinceIdCheck = (rule, value, callback) => {
		if(!value && form.value.dataRangeCountry == 2) {
			callback(new Error('请选择省'))
		} else if(value == undefined && form.value.dataRangeCountry == undefined) {
			callback()
		} else {
			callback()
		}
	}

	const data = reactive({
		queryParams: {
			name: '',
			landslideTime:'',
			landslideShape:'',			
			page: 1,
			rows: 10,
			province: '',
			city: '',
			county: '',
			town:'',
			village:'',
			landslideType:''
		},
		form:{},
		formData: {
			dataScope: '1',
			type: '1',
		},
		rules: {
			dataRangeCountry: [{
				required: true,
				message: "范围不能为空",
				trigger: "change"
			}],
			provinceId: [{
				message: "省不能为空",
				trigger: "change",
				validator: provinceIdCheck
			}],
			dataType: [{
				required: true,
				message: "数据类别不能为空",
				trigger: "change"
			}],
			dataType2: [{
				required: true,
				message: "子数据类别不能为空",
				trigger: "change"
			}],
			dataName: [{
				required: true,
				message: "数据名称不能为空",
				trigger: "blur"
			}],
			dataDesc: [{
				required: true,
				message: "数据说明不能为空",
				trigger: "blur"
			}],
			versionCode: [{
				required: true,
				message: "版本号不能为空",
				trigger: "change"
			}],
			versionTime: [{
				required: true,
				message: "版本日期不能为空",
				trigger: "change"
			}],
			versionDesc: [{
				required: true,
				message: "版本说明不能为空",
				trigger: "blur"
			}],
			updateDesc: [{
				required: true,
				message: "更新说明不能为空",
				trigger: "blur"
			}],
			dataFileIds: [{
				required: true,
				message: "数据文件不能为空",
				trigger: "blur"
			}],
			dataFrom: [{
				required: true,
				message: "数据来源不能为空",
				trigger: "blur"
			}],
			uploadSource: [{
				required: true,
				message: "数据来源不能为空",
				trigger: "blur"
			}],
			spatialDataType: [{
				required: true,
				message: "空间数据类型不能为空",
				trigger: "blur"
			}],
			projectionInfo: [{
				required: true,
				message: "投影信息不能为空",
				trigger: "blur"
			}],
			fieldNum: [{
				required: true,
				message: "字段个数不能为空",
				trigger: "blur"
			}, {
				pattern: /^[1-9]\d*$/,
				message: '请输入大于0的整数！',
				trigger: 'change'
			}],
			fieldEntry: [{
				required: true,
				message: "字段条目不能为空",
				trigger: "blur"
			}, {
				pattern: /^[1-9]\d*$/,
				message: '请输入大于0的整数！',
				trigger: 'change'
			}],
		}
	})
	const {
		queryParams,
		form,
		rules,
		formData
	} = toRefs(data);


	// 下载文件
	function handleDownload(row) {
		var query = {
			attachId: row.id,
			name: row.name
		}
		location.href =
			import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
	}

	// 重置数据
	function reset() {
		proxy.resetForm("ruleForm");
	}

	//查看
	function handleView(row) {
		open.value = true;
		getDetail(row.id).then(res => {
			console.log(res.data)
			formY02.value = res.data["2"];
			dataListY04.value = res.data["4"];
			dataListY05.value = res.data["5"];
			dataListY06.value = res.data["6"];
			dataListY10.value = res.data["10"];
			
		})
	}

	// 关闭
	function closeForm() {
		open.value = false;
	}

	// 数据详情
	function handleDetail(versionCode) {
		getDetail(versionCode).then(res => {
			formData.value = {
				dataScope: '1',
				type: '1',
				...res.data,
			};
			editProvinceFormData(formData.value.provinceId, formData.value.cityId)
		})
	}

	/** 导出按钮操作 */
	function handleExport() {
		proxy.download('/landslideSite/exportExcel', {
    ...queryParams.value,"versionCode":route.query.versionCode
  	},`滑坡现场调查数据${new Date().getTime()}.xls`)
	}


	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.page = 1;
		getList();
	}

	/** 重置按钮操作 */
	function resetQuery() {
		queryParams.value = {},
		dataList.value = [];
		proxy.resetForm("queryRef");
		handleQuery();
	}

	/** 查询数据列表 */
	function getList() {
		loading.value = true;
		listDataView({ ...queryParams.value,"versionCode":route.query.versionCode
		}).then(response => {
			dataList.value = response.data.rows ? response.data.rows : [];
			total.value = response.data.total;
			loading.value = false;
		});
	}

	// 多选框选中数据
	function handleSelectionChange(selection) {
		ids.value = selection.map(item => item.id);
		single.value = selection.length != 1;
		multiple.value = !selection.length;
		selectData.value = selection;
	}

	//获取当前日期，格式YYYY-MM-DD
	function getNowFormatTime(nowDate) {
		var char = "-";
		if(nowDate == null) {
			nowDate = new Date();
		}
		var day = nowDate.getDate();
		var month = nowDate.getMonth() + 1; //注意月份需要+1
		var year = nowDate.getFullYear();
		//补全0，并拼接
		return year + char + completeDate(month) + char + completeDate(day);
	}
	//获取当前时间，格式YYYY-MM-DD HH:mm:ss
	// function getNowFormatTime() {
	//     var nowDate = new Date();
	//     var colon = ":";
	//     var h = nowDate.getHours();
	//     var m = nowDate.getMinutes();
	//     var s = nowDate.getSeconds();
	//     //补全0，并拼接
	//     return getNowFormatDay(nowDate) + " " + completeDate(h) + colon + completeDate(m) + colon + completeDate(s);
	// }
	//补全0
	function completeDate(value) {
		return value < 10 ? "0" + value : value;
	}



	function chooseProvince(value) {
		queryParams.value.city = null;
		queryParams.value.county = null;
		cityData.value = [];
		getChildArea(value).then(response => {
			cityData.value = response.data;
		});
	}

	function chooseCity(value) {
		queryParams.value.county = null;
		areaData.value = [];
		getChildArea(value).then((response) => {
			areaData.value = response.data;
		});
	}

	function chooseFormCity(value) {
		form.value.countyId = null;
		areaFormData.value = [];
		getChildArea(value).then((response) => {
			areaFormData.value = response.data;
		});
	}

	function chooseFormProvince(value) {
		form.value.cityId = null;
		form.value.countyId = null;
		cityFormData.value = [];
		getChildArea(value).then(response => {
			cityFormData.value = response.data;
		});
	}

	/** 获取省列表 */
	function getProvinceData() {
		getProvince().then(response => {
			provinceData.value = response.data;
			provinceFormData.value = response.data;
			provinceFormData1.value = response.data;
		});
	}

	function editProvinceFormData(provinceId, cityId) {
		if(!provinceId && !cityId) {
			cityFormData1.value = [];
			areaFormData1.value = [];
		}
		if(provinceId && !cityId) {
			getChildArea(provinceId).then(response => {
				cityFormData1.value = response.data;
				areaFormData1.value = [];
			});
		}
		if(provinceId && cityId) {
			getChildArea(provinceId).then(response => {
				cityFormData1.value = response.data;
			});
			getChildArea(cityId).then(response => {
				areaFormData1.value = response.data;
			});
		}
		openData.value = true;
		proxy.resetForm("ruleFormData");
	}

	getProvinceData();
	getList();
</script>

<style lang="scss" scoped>
	.expandTable {
		padding: 5px 20px 5px 105px;
		h3 {
			font-weight: bold;
		}
		p {
			margin: 0px;
			line-height: 25px !important;
		}
	}
	
	.tab-title {
		font-size: 16px;
		font-weight: bold;
		border-left: 4px solid #0D9AFF;
		font-family: PingFangSC-Medium;
		padding-left: 10px;
		margin-bottom: 20px;
	}
	
	:deep(.el-drawer__header) {
		margin-bottom: 0px !important;
	}
	
	.el-form--inline .el-form-item {
		margin-right: 0px!important;
	}
	
	.spanStyle {
		display: inline-block;
		width: 40px;
		text-align: center;
	}
	
	:deep(.el-table__expand-icon) {
		display: none;
	}
	
	:deep(.el-table thead.is-group th.el-table__cell) {
		border-right: 1px solid #FFFFFF !important;
		border-bottom: 1px solid #FFFFFF !important;
	}
	
	table td {
		border: 1px solid #c6c6c6;
	}
	
	table th {
		border: 1px solid #c6c6c6;
	}
</style>